<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="model/table.js"></script>
</head>

<body style="width: 100vw; height: 100vh">

  <!-- 设计一个自定义的数据库二维表 -->

  <div id="app" style="margin: 20px auto; width: fit-content;"></div>
  <div id="controller">
    <button class="table-control button">AddRow</button>
    <button class="table-control button">AddCol</button>
    <button class="table-control button">DeleteRow</button>
    <button class="table-control button">DeleteCol</button>
  </div>

  <script>
    // 示例用法

    const app = document.getElementById('app');

    const table = new Table(4, 5);
    table.setData(0, 0, 'Hello WorldHello World Hello World');
    table.setData(0, 1, 'B');
    table.setData(0, 2, 'C');
    table.setData(1, 0, 'D');
    table.setData(1, 1, 'E');
    table.setData(1, 2, 'F');
    table.setData(2, 0, 'G');
    table.setData(2, 1, 'H');
    table.setData(2, 2, 'I');

    table.mount(app);
    table.render();
    // table.printData(app);
    table.initControl();
    table.handleListener();
  </script>

</body>

</html>